<template>
    <div>
        <ul class="mui-table-view mui-table-view-chevron">
            <li v-for="item in newslist" :key="item.id" class="mui-table-view-cell mui-media">
                <router-link :to="'/home/newinfo/' + item.id"  class="mui-navigate-right">
                    <img class="mui-media-object mui-pull-left" :src="item.images.small">
                    <div class="mui-media-body">
                        <h1>{{ item.title }}</h1>
                        <p class='mui-ellipsis'>
                            <span>上映年份：{{item.year}}</span>
                            <span>点击次数：
                                <em>{{item.collect_count}}</em>次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
//导入 mui  消息提示样式
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            newslist: []
        }
    },
    created() {
        this.getNewsList()
    },
    methods: {
        getNewsList() {
            // this.$axios.get('http://157.122.54.189:9093/api/getprodlist')
            // .then(res=>{
            //     console.log(res)
            // })
            // .catch(err=>{
            //     console.log(err)
            // })

            //跨域方式
            this.$http.jsonp('v2/movie/in_theaters')
                .then(res => {
                    Toast('获取电影资讯成功！');
                    console.log(res)
                    this.newslist = res.body.subjects
                }).catch(err => {
                    Toast('获取电影资讯失败！');
                    console.log(err)
                })
        }
    }
}


</script>


<style lang="scss" scoped>
.mui-table-view {
    li {
        h1 {
            font-size: 14px;
        }
        .mui-ellipsis {
            font-size: 12px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
            >span {
                em {
                    font-style: normal; 
                    display: inline-block;
                    width: 35px;
                    height: 14px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;     
                }
            }
        }
    }
}
</style>
